<template>
    <div class="notice">
        <div class="notice-inner">
            <div class="notice-inner-box">
                <div class="notice-item" v-for="(item,index) in noticeList" :key="index">{{ item.content }}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';

    const props = defineProps({
        noticeList:{type: Array,default:()=>[]}
    })  



</script>

<style lang="scss" scoped>
.notice{
    overflow: hidden;
    width: 100%;
    height: 100%;
    .notice-inner{
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 14px;
    &-box{
        animation: roll 10s linear infinite;
        .notice-item{
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding: 0 12px;
            white-space: nowrap;
        }        
    }
}
}


@keyframes roll {
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(-100%);
    }
}


</style>    